<template>
  <div class="personalCenter-container">
    <!-- 标题 -->
    <module-title :title="moduleTitle"></module-title>

    <!-- 条件查询 start -->
    <el-card
      :body-style="{ padding: '20px 30px' }"
      :style="{ position: 'relative' }"
    >
      <div slot="header" class="clearfix">
        <span>查询条件</span>
      </div>
      <el-form
        ref="backPemForm"
        :inline="true"
        :model="emsFindQueryForm"
        class="demo-form-inline"
      >
        <el-form-item label="用户名称" prop="nameKeyword">
          <el-input
            v-model="emsFindQueryForm.nameKeyword"
            placeholder="用户名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="用户状态" prop="enabled">
          <el-select
            v-model="emsFindQueryForm.enabled"
            clearable
            placeholder="请选择"
          >
            <el-option label="启用" :value="true"></el-option>
            <el-option label="禁用" :value="false"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="创建时间">
          <el-date-picker
            v-model="checkTime"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button
            class="handle-button"
            icon="el-icon-search"
            @click="queryEmsInfoSubmit"
            >查询</el-button
          >
          <el-button
            plain
            style="color: #999999"
            @click="resetFrom('backPemForm')"
            >清空条件</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 条件查询 end -->

    <!-- 列表 start -->
    <el-card :body-style="{ padding: '20px 30px' }" style="margin-top: 20px;">
      <!-- 用户列表 -->
      <div class="ems-list" style="position: relative">
        <div class="title-detail">
          用户列表
          <el-button
            class="form-btn"
            style="background-color: #1074fd;color: #ffffff"
            size="medium"
            @click="addEmsDialog = true"
            v-if="this.oemUserInfo.dsTotalNum - this.oemUserInfo.dsUsedNum >= 1 || this.oemUserInfo.jsTotalNum - this.oemUserInfo.jsUsedNum >= 1"
          >
            新增
          </el-button>
        </div>
        <div class="panel-body">
          <div class="widget-list list-left-element">
            <ul class="list" style="height: 500px;position:relative;">
              <li
                v-for="(item, index) in emsList"
                :key="item.id"
                style="position: relative;"
                :class="currentItemIndex === index ? 'current' : ''"
                @click="emsInfoClick(item, index)"
              >
                <div class="text">
                  <span class="title">{{ item.organName }}</span>

                  <div style="display: flex">
                    <span class="title1" style="color: rgb(66, 190, 255)">{{
                      item.usedNum
                    }}</span>
                    <span class="title1">{{
                      item.totalNum - item.usedNum
                    }}</span>
                  </div>
                </div>
                <div class="text" style="position: absolute; right: 5px;">
                  <span class="title">{{ item.totalNum }}</span>
                  <div style="display: flex;justify-content: flex-end">
                    <span
                      class="title1"
                      style="color: rgb(66, 190, 255)"
                      v-if="item.baned"
                      >启用</span
                    >
                    <span
                      class="title1"
                      style="color: #FF2F56"
                      v-else-if="!item.baned"
                      >禁用</span
                    >
                  </div>
                </div>
              </li>
              <li v-if="emsList.length === 0" class="list-nodata">
                <div class="title">暂无数据</div>
              </li>
            </ul>
          </div>
        </div>

        <div style="position: absolute;bottom: 10px">
          <el-pagination
            :page-size="6"
            :pager-count="5"
            layout="total, prev, pager, next"
            :total="emsTotal"
            @prev-click="paginationPrevClick"
            @next-click="paginationNextClick"
            @current-change="paginationNextChange"
          ></el-pagination>
        </div>
      </div>

      <!-- 用户详情 -->
      <div class="oem-detail">
        <!-- 操作按钮 -->
        <div class="title-detail">
          <div>
            用户详情
          </div>
          <div v-if="isNull">
            <el-button class="handle-button" @click="openMessage('reset')"
              >重置密码</el-button
            >
            <el-button
              style="background-color: #1074fd;color: #ffffff;border: 0"
              @click="openMessage('authorize')"
              v-if="this.oemUserInfo.dsTotalNum - this.oemUserInfo.dsUsedNum >= 1 || this.oemUserInfo.jsTotalNum - this.oemUserInfo.jsUsedNum >= 1"
            >
              添加授权
            </el-button>
            <el-button
              type="danger"
              @click="openMessage('ban')"
              v-if="emsinfo.enabled === '启用'"
            >
              {{ emsinfo.enabled === "启用" ? "禁用" : "启用" }}
            </el-button>
            <el-button type="success" @click="openMessage('ban')" v-else>
              {{ emsinfo.enabled === "启用" ? "禁用" : "启用" }}
            </el-button>
            <el-button class="handle-button" @click="openMessage('edit')"
              >编辑</el-button
            >
          </div>
        </div>
        <!-- 标签页 -->
        <el-tabs
          v-model="activeName"
          :style="{ margin: '20px' }"
          @tab-click="tabChange"
          v-if="isemsinfo"
        >
          <el-tab-pane label="基础信息" name="userInfo">
            <div class="detail-mes">
              <div class="messages1">用户编号：{{ emsinfo.code }}</div>
              <div class="messages">用户账号：{{ emsinfo.userName }}</div>
              <div class="messages">用户名称：{{ emsinfo.organName }}</div>
              <div class="messages">用户状态：{{ emsinfo.enabled }}</div>
              <div class="messages">上级：{{ emsinfo.parentOrganName }}</div>
            </div>
            <div class="detail-mes">
              <div class="messages" v-if="emsinfo.isDs">电商总控数：{{ emsinfo.dsTotalNum }}</div>
              <div class="messages" v-if="emsinfo.isDs">电商已使用：{{ emsinfo.dsUsedNum }}</div>
              <div class="messages" v-if="emsinfo.isJs">计数器总控数：{{ emsinfo.jsTotalNum }}</div>
              <div class="messages" v-if="emsinfo.isJs">计数器已使用：{{ emsinfo.jsUsedNum }}</div>
            </div>
            <div>
              <div class="messages1">创建时间：{{ emsinfo.createTime }}</div>
              <div class="messages1">备注：{{ emsinfo.remark }}</div>
              <div class="messages1" v-if="emsinfo.dsExpires">电商到期时间：{{ emsinfo.dsExpires }}</div>
              <div class="messages1" v-if="emsinfo.jsExpires">计数器到期时间：{{ emsinfo.jsExpires }}</div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="授权总数明细" name="authDetail">
            <div>
              <el-form
                :inline="true"
                :model="authDetailPage"
                class="demo-form-inline"
              >
                <div
                  style="display: flex;flex-direction: row;justify-content: space-between"
                >
                  <div>
                    <el-date-picker
                      v-model="checkTime"
                      type="daterange"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      :default-time="['00:00:00', '23:59:59']"
                    >
                    </el-date-picker>
                  </div>
                  <el-form-item>
                    <el-button
                      class="handle-button"
                      icon="el-icon-search"
                      @click="getAuthInfo"
                      >查询</el-button
                    >
                  </el-form-item>
                </div>
              </el-form>
              <el-table
                ref="RoutineTable"
                border
                :data="authDetail"
                tooltip-effect="dark"
                max-height="320px"
                style="font-size: 12px;"
              >
                <el-table-column prop="createTime" label="变更时间">
                  <template slot-scope="scope">
                    <span>{{ formDate(scope.row.createTime) }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="types" label="事项"></el-table-column>
                <el-table-column
                  prop="counts"
                  label="数量变动"
                ></el-table-column>
                <el-table-column prop="used" label="已使用"></el-table-column>
                <el-table-column
                  prop="total"
                  label="总授权数"
                ></el-table-column>
              </el-table>
            </div>
            <div class="table-bottom">
              <div class="table_pages">
                <el-pagination
                  :page-sizes="[10, 15, 20, 25, 30]"
                  :current-page="authDetailPage.pageNum"
                  :page-size="authDetailPage.pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="authDetailtotal"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                ></el-pagination>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-card>
    <!-- 列表 end -->

    <!-- 新增用户 -->
    <el-dialog width="40%" title="新增用户" :visible.sync="addEmsDialog">
      <el-form
        ref="addForm"
        :model="addEmsFormCopy"
        :rules="addEmsFormRules"
        size="mini"
        style="width:70%;margin: 0 auto "
      >
        <el-form-item label="用户账号" label-width="120px" prop="userName">
          <el-input
            v-model="addEmsFormCopy.userName"
            autocomplete="off"
            maxLength="11"
          ></el-input>
        </el-form-item>
        <el-form-item label="初始密码" label-width="120px" prop="password">
          <el-input
            v-model="addEmsFormCopy.password"
            type="password"
            autocomplete="off"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item label="确认密码" label-width="120px" prop="password2">
          <el-input
            v-model="addEmsFormCopy.password2"
            type="password"
            autocomplete="off"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item label="用户名称" label-width="120px" prop="organName">
          <el-input
            v-model="addEmsFormCopy.organName"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="备注" label-width="120px" prop="remark">
          <el-input
            v-model="addEmsFormCopy.remark"
            autocomplete="off"
            maxlength="30"
          ></el-input>
        </el-form-item>
        <el-form-item label="电商有效期" prop="endTime" label-width="120px" v-if="this.oemUserInfo.dsTotalNum - this.oemUserInfo.dsUsedNum >= 1">
          <el-input
            v-model="addEmsFormCopy.dsInitTotal"
            style="width: 80px; margin-right: 5px"
          ></el-input>
          控
          <el-input
            v-model="addEmsFormCopy.dsExpires"
            style="width: 50px; margin:0 5px 0 10px"
          ></el-input>
          个月
        </el-form-item>
        <el-form-item label="计数器有效期" prop="endTime" label-width="120px" v-if="this.oemUserInfo.jsTotalNum - this.oemUserInfo.jsUsedNum >= 1">
          <el-input
            v-model="addEmsFormCopy.jsInitTotal"
            style="width: 80px; margin-right: 5px"
          ></el-input>
          控
          <el-input
            v-model="addEmsFormCopy.jsExpires"
            style="width: 50px; margin:0 5px 0 10px"
          ></el-input>
          个月
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addEmsDialog = false">取 消</el-button>
        <el-button type="primary" @click="addEmsBtnClick()">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 编辑用户 -->
    <el-dialog width="40%" title="编辑用户" :visible.sync="editEmsDialig">
      <el-form
        ref="editForm"
        :model="editEmsForm"
        :rules="editEmsFormRules"
        size="mini"
        style="width:70%;margin: 0 auto "
      >
        <el-form-item label="用户账号" label-width="120px" prop="userName">
          <el-input
            v-model="emsinfo.userName"
            autocomplete="off"
            :disabled="true"
          ></el-input>
        </el-form-item>
        <el-form-item label="用户名称" label-width="120px" prop="organName">
          <el-input
            v-model="editEmsForm.organName"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editEmsDialig = false">取 消</el-button>
        <el-button type="primary" @click="oemUpload">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 添加授权 -->
    <el-dialog width="40%" title="添加授权" :visible.sync="addAuthDialog">
      <el-form
        :model="addAuthForm"
        size="mini"
        style="width:70%;margin: 0 auto "
      >
        <el-form-item label="新增电商控数" prop="count" label-width="140px" v-if="emsinfo.isDs">
          <el-input
            v-model="addAuthForm.dsCount"
            style="width: 84%; margin-right: 20px"
          ></el-input>
          控
        </el-form-item>
        <el-form-item label="增加电商有效时长" prop="time" label-width="140px" v-if="emsinfo.isDs">
          <el-input
            v-model="addAuthForm.dsTime"
            style="width: 84%; margin-right: 10px"
          ></el-input>
          个月
        </el-form-item>
        <el-form-item label="新增计数器控数" prop="count" label-width="140px" v-if="emsinfo.isJs">
          <el-input
            v-model="addAuthForm.jsCount"
            style="width: 84%; margin-right: 20px"
          ></el-input>
          控
        </el-form-item>
        <el-form-item label="增加计数器有效时长" prop="time" label-width="140px" v-if="emsinfo.isJs">
          <el-input
            v-model="addAuthForm.jsTime"
            style="width: 84%; margin-right: 10px"
          ></el-input>
          个月
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addAuthDialog = false">取 消</el-button>
        <el-button type="primary" @click="addAuth()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { isPassword, isPhone, isNumberBig } from "@/utils/validate";
import { mapState } from "vuex";
import API from "@/network/api/omsApi";
import pmsApi from "@/network/api/pmsApi";
import moment from "moment";
import { createSign } from "@/utils/sign";

import ModuleTitle from "@/components/content/ModuleTitle.vue";

export default {
  name: "index",
  data() {
    const validateUsername = async (rule, value, callback) => {
      if (value === "") {
        callback(new Error("该字段为必填项!"));
      } else {
        if (!isPhone(value)) {
          callback(new Error("账户名请用正确手机号创建"));
        } else {
          callback();
        }
      }
    };
    const validatePassword2 = (rule, value, callback) => {
      if (this.addEmsFormCopy.password !== value) {
        callback(new Error("两次密码输入不一致"));
      } else {
        callback();
      }
    };
    const validatePassword = (rule, value, callback) => {
      if (!isPassword(value)) {
        callback(new Error("密码不能少于6位"));
      } else {
        callback();
      }
    };
    const validateAuthTotal = (rule, value, callback) => {
      if (!isNumberBig(value)) {
        callback(new Error("请输入大于0的数字"));
      } else if (
        this.oemUserInfo.totalNum - this.oemUserInfo.usedNum <=
        value - 1
      ) {
        callback(new Error("可用授权数不足"));
      } else {
        callback();
      }
    };
    return {
      moduleTitle: "企业管理",
      isemsinfo: false,
      isNull: false,
      checkTime: [],
      emsList: [], // 企业列表
      emsTotal: 0, // 企业总数
      currentUserInfo: {}, // 当前选中企业
      currentItemIndex: 0,
      addEmsDialog: false, // 新增企业弹窗
      editEmsDialig: false, // 编辑企业弹窗
      addAuthDialog: false, // 添加授权弹窗
      activeName: "userInfo", // 标签页活跃页 默认企业详情
      authDetail: [], // 授权详情
      authDetailtotal: 0, // 授权总数
      emsinfo: {}, // 当前企业详情

      // 查询企业参数
      emsListPages: {
        pageNum: 1,
        pageSize: 6
      },
      listQueryForm: {
        organCode: "",
        type: "EMS" // OMS查询管理的贴牌，PMS查询管理的用户,EMS查询管理的企业
      },
      // 查询企业详情参数
      emsQueryDetail: {
        organId: 0 // 机构id
      },
      // 条件查询企业参数
      emsFindQueryForm: {
        nameKeyword: "", // 机构名称关键字
        organCodeN: "", // 需要查询的机构的code
        enabled: "",
        createTimeQ: "",
        createTimeH: ""
      },
      // 新增企业参数副本
      addEmsFormCopy: {
        userName: "", // 登陆账号
        password: "", // 登陆密码
        password2: "",
        organName: "", // 企业名称
        dsInitTotal: '', // 设备数
        dsExpires: '', // 有效时长
        remark: "", // 备注
        isJs: true,
        isDs: true,
        jsInitTotal: '',
        jsExpires: ''
      },
      // 新增企业参数
      addEmsForm: {
        operatorOrganId: 0, // 操作人员企业id
        level: "EMS", // 企业等级 贴牌OMS 用户PMS 企业EMS
        userName: "", // 登陆账号
        password: "", // 登陆密码
        organName: "", // 企业名称
        dsInitTotal: 0, // 设备数
        dsExpires: 0, // 有效时长
        remark: "", // 备注
        isJs: true,
        isDs: true,
        jsInitTotal: '',
        jsExpires: ''
      },
      // 新增企业参数校验规则
      addEmsFormRules: {
        userName: [
          {
            required: true,
            trigger: "blur",
            validator: validateUsername
          }
        ],
        password: [
          {
            required: true,
            trigger: "blur",
            validator: validatePassword
          }
        ],
        password2: [
          {
            required: true,
            trigger: "blur",
            validator: validatePassword2
          }
        ],
        organName: [
          {
            required: true,
            trigger: "blur",
            message: "该字段为必填字段"
          }
        ],
        initTotal: [
          {
            required: true,
            trigger: "blur",
            validator: validateAuthTotal
          }
        ]
      },
      // 编辑企业参数
      editEmsForm: {
        operatorOrganId: 0, // 操作人员企业id
        organId: 0, // 企业id
        organName: "", // 企业名称
        addTime: 0, // 新增有效时长
        num: 0 // 添加控数
      },
      // 编辑企业参数校验规则
      editEmsFormRules: {
        organName: [
          {
            required: true,
            trigger: "blur",
            message: "该字段为必填字段"
          }
        ]
      },
      // 添加授权参数
      addAuthForm: {
        fromOrganId: 0,
        toOrganId: 0,
        dsCount: null,
        remark: "",
        dsTime: null,
        jsTime: null,
        jsCount: null,
        isDs: true,
        isJs: true
      },
      // 授权信息查询参数
      authDetailPage: {
        operatorOrganId: 0,
        remarkKeyword: "",
        createTimeQ: "",
        createTimeH: "",
        pageNum: 1,
        pageSize: 10
      },
      // 公共参数
      publicForm: {
        timestamp: ""
      },
      requestParam: {
        organId: 0, // 机构id
        currentOrganId: 0, // 操作人员id
        enabled: ""
      },
      resPwdForm: {
        operatorOrganId: 0, // 操作人员企业id
        needReloadOrganId: 0 // 需要重置的企业id
      }
    };
  },
  computed: {
    ...mapState(["oemUserInfo"])
  },
  watch: {
    "emsinfo.id"() {
      if (this.emsinfo.id) {
        this.authDetailPage.operatorOrganId = this.emsinfo.id;
      }
    },
    checkTime() {
      if (this.checkTime === null) {
        this.checkTime = [];
      }
      if (this.checkTime.length !== 0) {
        this.emsFindQueryForm.createTimeQ = Number(
          moment(this.checkTime[0].getTime()).format("x")
        );
        this.emsFindQueryForm.createTimeH = Number(
          moment(this.checkTime[1].getTime()).format("x")
        );
        this.authDetailPage.createTimeQ = Number(
          moment(this.checkTime[0].getTime()).format("x")
        );
        this.authDetailPage.createTimeH = Number(
          moment(this.checkTime[1].getTime()).format("x")
        );
      } else {
        this.emsFindQueryForm.createTimeQ = "";
        this.emsFindQueryForm.createTimeH = "";
        this.authDetailPage.createTimeQ = "";
        this.authDetailPage.createTimeH = "";
      }
    }
  },
  created() {
    this.currentUserInfo = JSON.parse(localStorage.getItem("updateUserInfo"));
    this.getOem();
  },
  components: { ModuleTitle },
  methods: {
    /**
     * 逻辑
     */

    // 标签页
    formDate(createTime) {
      createTime = this.$moment(createTime).format("YYYY-MM-DD HH:mm:ss");
      return createTime;
    },
    tabChange(val) {
      if (val.paneName === "authDetail") {
        this.getAuthInfo();
      } else if (val.paneName === "videoHandle") {
        this.getSc();
      }
    },

    // 清空查询条件
    resetFrom(refName) {
      this.$refs[refName].resetFields();
    },

    // 弹窗路由
    openMessage(flag) {
      switch (flag) {
        case "reset":
          this.MessageBoxTemplateFn({ text: "确认要重置密码嘛？" }, "reset");
          break;
        case "authorize":
          this.addAuthDialog = true;
          break;
        case "ban":
          this.MessageBoxTemplateFn(
            {
              text:
                this.emsinfo.enabled === "启用"
                  ? "确定禁用此用户"
                  : "确定启用此用户"
            },
            "ban"
          );
          break;
        case "edit":
          this.openEditDialoalog();
          break;
        default:
          break;
      }
    },

    // 打开编辑弹窗
    openEditDialoalog() {
      this.editEmsForm.organName = this.emsinfo.organName;
      this.editEmsDialig = true;
    },

    // 新增企业
    addEmsBtnClick() {
      if (this.oemUserInfo.totalNum - this.oemUserInfo.totalEmsUsed !== 0) {
        this.addEms();
      } else {
        this.$message({
          type: "warning",
          message: "添加权限不足"
        });
      }
    },

    // 分页
    paginationPrevClick(page) {
      this.emsListPages.pageNum = page;
      this.getOem();
    },
    paginationNextClick(page) {
      this.emsListPages.pageNum = page;
      this.getOem();
    },
    paginationNextChange(page) {
      this.emsListPages.pageNum = page;
      this.getOem();
    },

    // 授权明细
    handleSizeChange(val) {
      this.authDetailPage.pageSize = val;
      this.getAuthInfo();
    },
    handleCurrentChange(val) {
      this.authDetailPage.pageNum = val;
      this.getAuthInfo();
    },

    /**
     * 网络
     */

    // 查询企业列表
    async getOem() {
      this.listQueryForm.organCode = this.currentUserInfo.organCode;
      this.publicForm.timestamp = new Date().getTime();
      if (this.publicForm.sign) {
        delete this.publicForm.sign;
      }
      this.publicForm.sign = createSign(
        JSON.stringify({
          ...this.emsListPages,
          ...this.listQueryForm,
          ...this.publicForm
        })
      );
      API.getOemList({
        ...this.emsListPages,
        ...this.listQueryForm,
        ...this.publicForm
      }).then(res => {
        if (res.data.code === 0) {
          if (res.data.data.records.length !== 0) {
            const Emsdata = res.data.data;
            this.emsTotal = Emsdata.total;
            this.emsList = Emsdata.records;
            this.emsInfoClick(this.emsList[this.currentItemIndex]);
            this.isNull = true;
          } else {
            this.emsTotal = 0;
            this.emsList.length = 0;
            this.isNull = false;
            this.isemsinfo = false;
          }
        } else {
          this.$message({ type: "warning", message: res.data.msg });
        }
      });
    },

    // 查询企业基础信息
    emsInfoClick(item, index) {
      if (index !== undefined) {
        this.currentItemIndex = index;
      }
      this.emsQueryDetail.organId = item.organId;
      this.publicForm.timestamp = new Date().getTime();
      if (this.publicForm.sign) {
        delete this.publicForm.sign;
      }
      this.publicForm.sign = createSign(
        JSON.stringify({
          ...this.emsQueryDetail,
          ...this.publicForm
        })
      );
      API.getListDetail({
        ...this.emsQueryDetail,
        ...this.publicForm
      }).then(res => {
        if (res.data.code === 0) {
          const result = res.data.data;
          this.emsinfo = result;
          this.emsinfo.code = result.organCode.split("_")[3];
          this.emsinfo.createTime = this.$moment(result.createTime).format(
            "YYYY-MM-DD HH:mm:ss"
          );
          if (result.remark === "") {
            this.emsinfo.remark = "无";
          } else {
            this.emsinfo.remark = result.remark;
          }
          if (!result.enabled) {
            this.emsinfo.enabled = "禁用";
            this.emsinfo.organStatus = true;
          } else {
            this.emsinfo.enabled = "启用";
            this.emsinfo.organStatus = false;
          }
          this.emsinfo.id = item.organId;
          this.activeName = "userInfo";
          this.isemsinfo = true;
        } else {
          this.$message({
            type: "warning",
            message: res.data.msg
          });
        }
      });
    },

    // 查询企业授权日志明细
    async getAuthInfo() {
      this.publicForm.timestamp = new Date().getTime();
      if (this.publicForm.sign) {
        delete this.publicForm.sign;
      }
      if (this.authDetailPage.createTimeQ === "") {
        delete this.authDetailPage.createTimeQ;
      }
      if (this.authDetailPage.createTimeH === "") {
        delete this.authDetailPage.createTimeH;
      }
      this.publicForm.sign = createSign(
        JSON.stringify({ ...this.authDetailPage, ...this.publicForm })
      );
      API.getAuthDetail({ ...this.authDetailPage, ...this.publicForm }).then(
        res => {
          if (res.data.code === 0) {
            const authDetail = res.data.data;
            this.authDetail = authDetail.records;
            this.authDetailtotal = authDetail.total;
          } else {
            this.$message({ type: "warning", message: res.data.msg });
          }
        }
      );
    },

    // 添加授权
    async addAuth() {
      this.addAuthForm.fromOrganId = this.currentUserInfo.organId;
      this.addAuthForm.toOrganId = this.emsinfo.id;
      this.addAuthForm.jsCount = Number(this.addAuthForm.jsCount);
      this.addAuthForm.jsTime = Number(this.addAuthForm.jsTime);
      this.addAuthForm.dsCount = Number(this.addAuthForm.dsCount);
      this.addAuthForm.dsTime = Number(this.addAuthForm.dsTime);
      this.publicForm.timestamp = +new Date();
      if (this.publicForm.sign) {
        delete this.publicForm.sign;
      }
      this.publicForm.sign = createSign(
        JSON.stringify({
          ...this.addAuthForm,
          ...this.publicForm
        })
      );
      await pmsApi
        .addAuth({
          ...this.addAuthForm,
          ...this.publicForm
        })
        .then(res => {
          if (res.data.code === 0) {
            this.$message.success("添加授权成功");
          } else {
            this.$message.warning(`${res.data.msg}`);
          }
        });
      this.addAuthDialog = false;
      this.addAuthForm.dsCount = null;
      this.addAuthForm.dsTime = null;
      this.addAuthForm.jsCount = null;
      this.addAuthForm.jsTime = null;
      this.getOem();
      this.$store.dispatch("loginInfo");
    },

    // 新增企业
    async addEms() {
      var that = this;
      this.$refs.addForm.validate(async vali => {
        if (!vali) return;
        that.addEmsForm.operatorOrganId = this.currentUserInfo.organId;
        that.addEmsForm.password = this.$md5(that.addEmsFormCopy.password);
        that.addEmsForm.dsInitTotal = Number(that.addEmsFormCopy.dsInitTotal);
        that.addEmsForm.dsExpires = Number(that.addEmsFormCopy.dsExpires);
        that.addEmsForm.jsInitTotal = Number(that.addEmsFormCopy.jsInitTotal);
        that.addEmsForm.jsExpires = Number(that.addEmsFormCopy.jsExpires);
        that.addEmsForm.organName = that.addEmsFormCopy.organName;
        that.addEmsForm.remark = that.addEmsFormCopy.remark;
        that.addEmsForm.userName = that.addEmsFormCopy.userName;
        that.addEmsForm.isJs = that.addEmsFormCopy.isJs;
        that.addEmsForm.isDs = that.addEmsFormCopy.isDs;
        that.publicForm.timestamp = +new Date();
        if (that.publicForm.sign) {
          delete that.publicForm.sign;
        }
        that.publicForm.sign = createSign(
          JSON.stringify({
            ...that.addEmsForm,
            ...that.publicForm
          })
        );
        await pmsApi
          .addEms({
            ...that.addEmsForm,
            ...that.publicForm
          })
          .then(res => {
            if (res.data.code === 0) {
              that.$message("添加成功!", "success");
            } else {
              this.$message({
                type: "warning",
                message: res.data.msg
              });
            }
          });
        that.$refs.addForm.resetFields();
        that.addEmsDialog = false;
        that.getOem();
        that.$store.dispatch("loginInfo");
      });
    },

    // 编辑企业
    async oemUpload() {
      this.editEmsForm.operatorOrganId = this.currentUserInfo.organId;
      this.editEmsForm.organId = this.emsinfo.id;
      this.editEmsForm.num = Number(this.editEmsForm.num);
      this.editEmsForm.addTime = Number(this.editEmsForm.addTime);
      this.publicForm.timestamp = +new Date();
      if (this.publicForm.sign) {
        delete this.publicForm.sign;
      }
      this.publicForm.sign = createSign(
        JSON.stringify({
          ...this.editEmsForm,
          ...this.publicForm
        })
      );
      await API.editOemForm({
        ...this.editEmsForm,
        ...this.publicForm
      }).then(res => {
        if (res.data.code === 0) {
          this.$message.success("编辑成功!");
        } else {
          this.$message({
            type: "warning",
            message: res.data.msg
          });
        }
      });
      this.getOem();
      this.editEmsDialig = false;
    },

    // 条件查询企业
    queryEmsInfoSubmit() {
      if (this.emsFindQueryForm.createTimeQ === "") {
        delete this.emsFindQueryForm.createTimeQ;
      }
      if (this.emsFindQueryForm.createTimeH === "") {
        delete this.emsFindQueryForm.createTimeH;
      }
      if (this.emsFindQueryForm.enabled === "") {
        delete this.emsFindQueryForm.enabled;
      } else {
        this.emsFindQueryForm.enabled = Boolean(this.emsFindQueryForm.enabled);
      }
      this.listQueryForm.organCode = this.currentUserInfo.organCode;
      this.publicForm.timestamp = new Date().getTime();
      if (this.publicForm.sign) {
        delete this.publicForm.sign;
      }
      this.publicForm.sign = createSign(
        JSON.stringify({
          ...this.emsFindQueryForm,
          ...this.emsListPages,
          ...this.listQueryForm,
          ...this.publicForm
        })
      );
      API.getList({
        ...this.emsFindQueryForm,
        ...this.emsListPages,
        ...this.listQueryForm,
        ...this.publicForm
      }).then(res => {
        if (res.data.code === 0) {
          if (res.data.data.records.length !== 0) {
            const Emsdata = res.data.data;
            this.emsTotal = Emsdata.total;
            this.emsList = Emsdata.records;
            this.emsInfoClick(this.emsList[this.currentItemIndex]);
            this.isNull = true;
          } else {
            this.emsTotal = 0;
            this.emsList.length = 0;
            this.isNull = false;
            this.isemsinfo = false;
          }
        } else {
          this.$message({
            type: "warning",
            message: res.data.msg
          });
        }
      });
    },

    // 重置密码/禁用/解禁
    MessageBoxTemplateFn({ text }, falg) {
      this.$confirm(text, "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          this.requestParam.organId = this.emsinfo.id;
          this.requestParam.currentOrganId = this.currentUserInfo.organId;
          this.requestParam.enabled = Boolean(this.emsinfo.organStatus);
          this.publicForm.timestamp = new Date().getTime();
          this.resPwdForm.operatorOrganId = this.currentUserInfo.organId;
          this.resPwdForm.needReloadOrganId = this.emsinfo.id;
          if (this.publicForm.sign) {
            delete this.publicForm.sign;
          }
          this.publicForm.sign = createSign(
            JSON.stringify({ ...this.resPwdForm, ...this.publicForm })
          );
          falg === "reset" &&
            (await API.resetPwd({
              ...this.resPwdForm,
              ...this.publicForm
            }).then(res => {
              if (res.data.code === 0) {
                const Base64 = require("js-base64").Base64;
                const newPwd = Base64.decode(res.data.data);
                this.$alert(
                  "重置后的密码为\xa0\xa0" + newPwd,
                  "密码重置成功！",
                  {
                    type: "success",
                    confirmButtonText: "确定",
                    callback: action => {
                      this.$message({
                        type: "success",
                        message: "密码重置成功！"
                      });
                    }
                  }
                );
              }
            }));
          if (falg === "ban") {
            if (this.publicForm.sign) {
              delete this.publicForm.sign;
            }
            this.publicForm.sign = createSign(
              JSON.stringify({ ...this.requestParam, ...this.publicForm })
            );
            await API.impowerUser({
              ...this.requestParam,
              ...this.publicForm
            }).then(res => {
              if (res.data.code === 0) {
                this.$message("操作成功!", "success");
              } else {
                this.$message({
                  type: "warning",
                  message: res.data.msg
                });
              }
            });
          }
          this.getOem();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    }
  }
};
</script>

<style scoped>
/* 操作按钮 */
.handle-button {
  background-color: #1074fd;
  color: #ffffff;
  border: 0;
}
.current {
  background-color: #1074fd;
  color: #ffffff;
}

ul {
  margin: 0;
  padding: 0;
}

ul li {
  list-style: none;
}

.list {
  height: 100px;
  padding: 0px 20px 30px 20px !important;
  overflow: hidden;
  margin: 0 !important;
}

.title {
  display: block;
  margin: 5px;
}
.title1 {
  display: block;
  margin: 5px;
  font-size: 12px;
}

.list li {
  display: flex;
  padding: 8px;
  margin-bottom: 5px;
  cursor: pointer;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.ems-list {
  display: inline-block;
  width: 35%;
  height: 600px;
  margin: 20px 10px 20px 0;
  vertical-align: top;
  border: 1px #bbb solid;
  border-radius: 10px;
}

.oem-detail {
  display: inline-block;
  width: 60%;
  height: 600px;
  margin: 20px 0 20px 10px;
  border: 1px #bbb solid;
  border-radius: 10px;
}

.title-detail {
  height: 10%;
  padding: 0 20px;
  margin: 0 0 20px 0;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  background-color: #d9d9d9;
  border-bottom: 1px #bbb solid;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.detail-mes {
  border-bottom: 1px #e5e5e5 solid;
}

.messages {
  display: inline-block;
  width: 40%;
  margin: 10px 0;
  color: #666666;
}
.messages1 {
  display: inline-block;
  width: 80%;
  margin: 10px 0;
  color: #666666;
}

.table-bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 25px 10px 0 10px;
}

.form-btn {
  float: right;
  width: 80px;
  margin-left: 15px !important;
  border: 0;
}
/*样式无法修改时  用 /deep/ 或 ::v-deep 操作符取而代之*/
/deep/ .el-tabs__item.is-active {
  color: #1074fd;
}
/deep/ .el-tabs__item:hover {
  color: #1074fd;
  cursor: pointer;
}
/deep/ .el-tabs__active-bar {
  background-color: #1074fd;
}
/deep/ .el-table th {
  overflow: hidden;
  background-color: #d9d9d9;
  color: #888888;
}
/deep/ .el-dialog__header {
  background-color: #d9d9d9;
}

/*element表格单选选中状态下背景色太浅，为了让选中的数据更突出一些，只能自定义颜色去覆盖默认的颜色，我的表格是斑马纹的，可能非斑马的还不适用*/
/deep/.el-table--striped
  .el-table__body
  tr.el-table__row--striped.current-row
  td,
/deep/.el-table__body tr.current-row > td {
  background-color: #2aca76 !important;
}

/*element鼠标滑过高亮显示的颜色也太淡*/
/deep/.el-table__body tr:hover > td {
  background-color: #3dc7ab !important;
}
</style>
